<template>
  <div class="about" @mousemove="MoveMouse">
    <p>{{x}}--{{y}}</p>
    <hr/>
    <img :src="DogUrl">
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"AboutView",
})
</script>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import axios from "axios";
const x = ref(-1);
const y = ref(-1);

const MoveMouse = (e:MouseEvent)=>{
    x.value = e.clientX
    y.value = e.clientY
}

const DogUrl = ref("")
const ShowDog = async ()=>{
    const result = await axios.get("https://dog.ceo/api/breeds/image/random")
    console.log(result)
    DogUrl.value = result.data.message
}
onMounted(()=>{
    ShowDog()
})
</script>

<style lang="scss" scoped>
.about{
  height: 600px;
  width: 100%;
  border: 1px solid #2c3e50;
}
</style>